<%@page import="model.Comment"%>
<%@include file="init.jsp" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scrip.js"></script>
<script type="text/javascript">

function exchange(productId) {
	var http = new XMLHttpRequest();
	var s = "productId="+
			productId
			+ "&comment="
			+ encodeURIComponent(document.getElementsByName("comment")[0].value);
	console.log(s);

	http.open("POST", "Comment");

	http.onreadystatechange = function() {

		if (http.readyState == 4) {
			var divTemp = document.createElement("div");
			divTemp.className = "comment_item";
			divTemp.innerHTML = http.responseText;
			var divComment = document.getElementById("list_comment");
			divComment.appendChild(divTemp);

			document.getElementsByName("comment")[0].value = "";
			
		}
	};

	http.setRequestHeader("Content-type",
			"application/x-www-form-urlencoded; charset=ISO-8859-1;");

	http.send(s);
}

function paging(pageIndex, productId) {
	var http = new XMLHttpRequest();
	var s = "pageIndex=" + pageIndex + "&productId=" + productId;
	console.log(s);

	http.open("POST", "Comment");

	http.onreadystatechange = function() {

		if (http.readyState == 4) {
			var divComment = document.getElementById("list_comment");

			divComment.innerHTML = http.responseText;

			
		}
	};

	http.setRequestHeader("Content-type",
			"application/x-www-form-urlencoded; charset=ISO-8859-1;");

	http.send(s);
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chi tiết sản phẩm</title>
</head>
<body>
<div class="master-wrapper-content">
	<jsp:include page="heading.jsp"></jsp:include>
	<jsp:include page="listCategory.jsp"></jsp:include>
	<div class="container-right">		
	<%
		String productIdStr = request.getParameter("productId");
		String user = (String)session.getAttribute("username");
		int productId = productIdStr == null ? -1:Integer.parseInt(productIdStr);
		if(productId == -1) 
		{
			%>
				<h3 style="color:  red;"> khong co san pham duoc tim thay</h3>
			<%
		}
		
		else
		{
			Product p = dataManager.getProductById(productId);
			%>
			<div class="ml-banner">
				<div class="ml-title">Chi tiết sản phẩm</div>
			</div>
			<table id="containner-detailproduct">
			<tr>
			<td>
			<table id="container-left">
				<tr>
					<td id="image-detailproduct"><img src="<%="/ECommerce/DisplayImage?path=" + p.getImage() %>"/></td>
				</tr>
				<tr>
					<td id="gia">Gia : <%=p.getPrice() %></td>
				</tr>
				
				<tr>
					<td class="add_favourite">Tình trạng : còn hàng</td>
				</tr>
				<%
					if(user!=null)
					{
						%>
						<tr>
						<td>
							<div class="add_favourite" id="add_favourite">
								<button class="button-add" onclick="addFavourite(<%=p.getProductId()%>)"><img src="images/f-a.png"/></button>
							</div>
							<div class="add_favourite" id="add_cart">
								<button  class="button-add" onclick="addCart(<%=p.getProductId()%>)"><img src="images/c-a.png"/></button>
							</div>
						</td>
						</tr>
						<%
					}
					else
					{
						%>
						<tr>
						<td>Đăng nhập để được mua hàng</td>
						</tr>
						<%
					}
				%>
				
			</table>
			</td>
			<td>
			<table >
				<tr>
				<td id="nameproduct"><%=p.getProductName() %></td>
				</tr>
				<tr>
				<td id="detailproduct"><%=p.getDescription() %></td>
				</tr>
			</table>
			</td>
			</tr>
			</table>
			
		<h3 style="color: red;">Bình luận</h3>
		<%
			List<Comment> comments = dataManager.getAllCommentWithProductId(p.getProductId());
			int size = comments.size();
		if(comments == null || comments.isEmpty())
		{
			%>
			<div id="list_comment">
				<h4>Hiện chưa có bình luận nào</h4>
				</div>
			<%
		}
		else
		{
			%>
				<div id="list_comment">
					<%
					for(int i = 0 ; i<5; i++)
					{
						if(i<comments.size())
						{
						%>
						<div class="item-comment">
							<div class="comment-name">
								<a href="#"><%=dataManager.getUserWithUserId(comments.get(i).getUserId()).getUsername() %></a><br>
							</div>
							<div class="comment-content">
								<p><%=comments.get(i).getUsercomment() %></p>
							</div>
						</div>
						<%
						}
					}
					%>
					
					<div id= "paging">
					
						<button class="current_page" onclick="paging(0,<%=p.getProductId()%>)">1</button>
						<button class="relate_page" onclick="paging(1,<%=p.getProductId()%>)">2</button>
						<button class="relate_page" onclick="paging(2,<%=p.getProductId()%>)">3</button>
						... <button>tiếp</button>
					</div>
					
				</div>
					
				
					
					<%
		}
		
		String username = (String)session.getAttribute("username");
		if(username == null)
		{
			%>
			<h4>Đăng nhập để thêm bình luận</h4>
			<%
		}
		else
		{
			%>				
				<textarea  cols="100" rows="10" name="comment"></textarea> <br>
				<input type="button" value="Add Comment" onclick="exchange(<%=p.getProductId() %>)" />
					 
			<%
		}
		%>
		
		<%
		}
	%>
	
	</div>
	<div class="clear"></div>
	<jsp:include page="footer.jsp"></jsp:include>
</div>
</body>
</html>